import { App, Checkbox, Col, Descriptions, Form, Input, Modal, Radio, Row, Select, Tooltip } from 'antd';
import { useState, useEffect } from 'react'
import FetchHelper from '../../../../../../utils/helper/fetch-helper';
import MapPoint from '../../../../../framework/MapPoint';

const A = props => {
    const { value, onChange, tooltip } = props;
    return <Tooltip title={tooltip}>
        <Input value={value} onChange={onChange} />
    </Tooltip>
}

export default function EditModal(props) {
    const { record, cztxlDefs, node } = props;
    const [form] = Form.useForm();
    const [loading, setLoading] = useState();

    const { message } = App.useApp();

    useEffect(() => {
        if (record) {
            form.setFieldsValue(record);
        }

    }, [form, record])

    if (!cztxlDefs?.templates) {
        return null
    }
    return <Modal confirmLoading={loading} width={1000} onOk={e => {
        form.validateFields().then(values => {
            const data = {
                ...record,
                ...values,
                cztdl: "承灾体",
                cztzl: node.cztzl,
                cztxl: node.title
            }
            if (record) {
                setLoading(true);
                FetchHelper.putJson(`/admin-api/ybyj/cztjcb`, {
                    ...data,
                    xq: JSON.stringify(data)
                }).then(resp => {
                    props.onOk?.()
                }).finally(e => {
                    setLoading(false);
                })
            } else {
                setLoading(true);
                FetchHelper.postJson(`/admin-api/ybyj/cztjcb`, {
                    ...data,
                    xq: JSON.stringify(data)
                }).then(resp => {
                    props.onOk?.()
                }).finally(e => {
                    setLoading(false);
                })
            }

        }).catch(err => {
            message.error(`${err?.errorFields?.[0]?.errors?.[0] || '验证失败'}`)
        })
    }} bodyStyle={{
        height: 600,
        padding: 24,
        overflow: 'auto'
    }} title={`${record ? "编辑" : "新增"}${node.title}`} open={props.open} onCancel={e => props.onCancel?.()}>
        <Form form={form} labelAlign='right' labelCol={{ span: 6 }} labelWrap={{ span: 18 }}>

            <Row gutter={24}>
                {cztxlDefs?.templates?.map((item, i, a) => {
                    let inputNode = <A tooltip={item.tooltip} />
                    switch (item.type) {
                        case 'select':
                            inputNode = <Select onSelect={() => { }} >
                                {item.child.map(item => {
                                    return <Select.Option value={item.key}>{item.value}</Select.Option>
                                })}
                            </Select>;;
                            break;
                        case 'checkbox':
                            inputNode = <Checkbox.Group >
                                {item.child.map(item => {
                                    return <Checkbox value={item.key}>{item.value}</Checkbox>
                                })}
                            </Checkbox.Group>;
                            break;
                        case 'rddio':
                            inputNode = <Radio.Group >
                                {item.child.map(item => {
                                    return <Radio value={item.key}>{item.value}</Radio>
                                })}
                            </Radio.Group>;
                            break;
                        case 'map':
                            inputNode = <MapPoint />;
                            break;
                        default:
                    }
                    return <><Col span={12}>
                        {
                            (() => {
                                let fromNode = <Form.Item rules={
                                    item.rules
                                } label={item.title} name={item.dataIndex} key={item.dataIndex} tooltip={item.tooltiphelp} help={item.help}>
                                    {/* <Tooltip title={item.tooltip} trigger="hover">
                                        {inputNode}
                                    </Tooltip> */}
                                    {inputNode}
                                </Form.Item>
                                switch (item.type) {
                                    case 'checkbox':
                                        fromNode = <Form.Item rules={
                                            item.rules
                                        } label={item.title} name={item.dataIndex} key={item.dataIndex} valuePropName="checked" >
                                            {inputNode}
                                        </Form.Item>;
                                        break;
                                    default:
                                }
                                return fromNode
                            })()
                        }

                    </Col>
                        {item.type === 'map' && a.length > 15 && <Col span={24}>
                            {/* 普查数据表单的提示内容，map为系统数据库表单最后一项，如果对其顺序做了修改，请修改item.type === 'map'的匹配值为系统字段最后一项，前提是所有字段符合以一个同样的字段结尾的规则，否则代码效果会错误，请删除此部分代码*/}
                            <hr />
                            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;多选数据，为填写方便，默认下拉中包含所有填写项，需要删除不属于当前对象的，系统默认根据“;”英文分号分隔符解析，请注意不要删除分号。例：  选项1;选项2;选项5  </p>
                            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在多选、单选下拉中包含“其他”选项，并且需要填写说明时，模板默认在该列后增加了其他说明填写列。</p>
                            <br />
                            <br />
                        </Col>}
                    </>
                })}

            </Row>
        </Form>
    </Modal>;
}